<template>
  <div class="Main">
   <van-nav-bar title="猫眼电影" />
    <router-view></router-view>
    <van-tabbar v-model="IndexActive" active-color="rgb(240, 61, 55)" route placeholder >
      <van-tabbar-item v-for="(item,index) in tabbarData" :key="index" :to="{name:item.routeName}">
        <span>{{item.title}}</span>
        <template #icon="props">
          <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: "Main",
  data() {
    return {
      IndexActive: 0,
      tabbarData: [
        {
          title: "首页",
          activeIcon: require("../assets/index_active.png"),
          inactiveIcon: require("../assets/shouye.png"),
          routeName: "Index"
        },
        {
          title: "视频",
          activeIcon: require("../assets/dianying_active.png"),
          inactiveIcon: require("../assets/dianying.png"),
          routeName: "Movie"
        },
        {
          title: "小视频",
          activeIcon: require("../assets/xiaoshipin.png"),
          inactiveIcon: require("../assets/xiaoshipin_active.png"),
          routeName: "Short"
        },
        {
          title: "我的",
          activeIcon: require("../assets/wode_active.png"),
          inactiveIcon: require("../assets/wode.png"),
          routeName: "My"
        }
      ]
    };
  },
  methods: {},
};
</script>
<style lang="less" scoped>
/deep/.van-nav-bar__content{
  background-color: #e4393c;
  .van-nav-bar__title{
    color: #eee;
  }
}
</style>